<!--  Copyright 2020 Zhejiang Lab and Zhejiang University. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* =============================================================
-->

<template>
  <div>
    <b-form>
      <b-row>
        <b-col>
          <b-form-group label="任务：" label-cols-sm="2" label-cols-lg="1">
            <b-form-checkbox
              v-for="item in options.tasks"
              :key="item.id"
              :value="item.id"
              v-model="task_info.tasks"
              button
              button-variant="outline-primary"
              :style="style.checkbox"
            >{{item.name}}</b-form-checkbox>
          </b-form-group>
        </b-col>
      </b-row>

      <b-row>
        <b-col>
          <b-form-group label="算法：" label-cols-sm="3" label-cols-lg="1">
            <b-form-select v-model="task_info.algorithms">
              <option :value="null" disabled>请选择算法</option>
              <option
                v-for="item in options.algorithms"
                :key="item.id"
                :value="item.id"
              >{{item.alg_name}}</option>
            </b-form-select>
          </b-form-group>
        </b-col>
      </b-row>

      <b-form-group label="数据集：" 
      label-cols-sm="4"
      label-cols-lg="1">
      <b-form-tags v-model="task_info.datasets" no-outer-focus class="mb-2">
        <template v-slot="{ tags, disabled, addTag, removeTag }">
          <ul v-if="tags.length > 0" class="list-inline d-inline-block mb-2">
            <li v-for="tag in tags" :key="tag" class="list-inline-item">
              <b-form-tag
                @remove="removeTag(tag)"
                :title="tag"
                :disabled="disabled"
                variant="primary"                
              >{{ tag }}</b-form-tag>
            </li>
          </ul>
          <b-dropdown size="sm" variant="outline-secondary" block menu-class="w-100">
            <template v-slot:button-content>
               添加数据集
            </template>
            <b-dropdown-form @submit.stop.prevent="() => {}">
              <b-form-group
                label-for="tag-search-input"
                label="搜索"
                label-cols-md="auto"
                class="mb-0"
                label-size="sm"
                :disabled="disabled"
              >
                <b-form-input
                  v-model="dataset_search"
                  id="tag-search-input"
                  type="search"
                  size="sm"
                  autocomplete="off"
                 ></b-form-input>
              </b-form-group>
            </b-dropdown-form>
            <b-dropdown-divider></b-dropdown-divider>
            <b-dropdown-item-button
              v-for="item in availableItems(dataset_search, task_info.datasets, options.datasets)"
              :key="item.id"
              @click="onDatasetClick({ item, addTag })"
            >
              {{ item.name }}
            </b-dropdown-item-button>
            <b-dropdown-text v-if="availableItems(dataset_search, task_info.datasets, options.datasets).length === 0">
              无匹配结果
            </b-dropdown-text>
          </b-dropdown>
        </template>
      </b-form-tags>
    </b-form-group>

    
      <b-form-group label="教师模型：" 
      label-cols-sm="4"
      label-cols-lg="1">
      <b-form-tags v-model="task_info.teacher_models" no-outer-focus class="mb-2">
        <template v-slot="{ tags, disabled, addTag, removeTag }">
          <ul v-if="tags.length > 0" class="list-inline d-inline-block mb-2">
            <li v-for="tag in tags" :key="tag" class="list-inline-item">
              <b-form-tag
                @remove="removeTag(tag)"
                :title="tag"
                :disabled="disabled"
                variant="primary"                
              >{{ tag }}</b-form-tag>
            </li>
          </ul>
          <b-dropdown size="sm" variant="outline-secondary" block menu-class="w-100">
            <template v-slot:button-content>
               添加教师模型
            </template>
            <b-dropdown-form @submit.stop.prevent="() => {}">
              <b-form-group
                label-for="tag-search-input"
                label="搜索"
                label-cols-md="auto"
                class="mb-0"
                label-size="sm"
                :disabled="disabled"
              >
                <b-form-input
                  v-model="teacher_search"
                  id="tag-search-input"
                  type="search"
                  size="sm"
                  autocomplete="off"
                 ></b-form-input>
              </b-form-group>
            </b-dropdown-form>
            <b-dropdown-divider></b-dropdown-divider>
            <b-dropdown-item-button
              v-for="item in availableItems(teacher_search, task_info.teacher_models, options.models)"
              :key="item.id"
              @click="onTeacherClick({ item, addTag })"
            >
              {{ item.name }}
            </b-dropdown-item-button>
            <b-dropdown-text v-if="availableItems(teacher_search, task_info.teacher_models, options.models).length === 0">
              无匹配结果
            </b-dropdown-text>
          </b-dropdown>
        </template>
      </b-form-tags>
    </b-form-group>

    <b-form-group label="学生模型：" 
      label-cols-sm="4"
      label-cols-lg="1">
      <b-form-tags v-model="task_info.student_models" no-outer-focus class="mb-2">
        <template v-slot="{ tags, disabled, addTag, removeTag }">
          <ul v-if="tags.length > 0" class="list-inline d-inline-block mb-2">
            <li v-for="tag in tags" :key="tag" class="list-inline-item">
              <b-form-tag
                @remove="removeTag(tag)"
                :title="tag"
                :disabled="disabled"
                variant="primary"                
              >{{ tag }}</b-form-tag>
            </li>
          </ul>
          <b-dropdown size="sm" variant="outline-secondary" block menu-class="w-100">
            <template v-slot:button-content>
               添加学生模型
            </template>
            <b-dropdown-form @submit.stop.prevent="() => {}">
              <b-form-group
                label-for="tag-search-input"
                label="搜索"
                label-cols-md="auto"
                class="mb-0"
                label-size="sm"
                :disabled="disabled"
              >
                <b-form-input
                  v-model="student_search"
                  id="tag-search-input"
                  type="search"
                  size="sm"
                  autocomplete="off"
                 ></b-form-input>
              </b-form-group>
            </b-dropdown-form>
            <b-dropdown-divider></b-dropdown-divider>
            <b-dropdown-item-button
              v-for="item in availableItems(student_search, task_info.student_models, options.models)"
              :key="item.id"
              @click="onStudentClick({ item, addTag })"
            >
              {{ item.name }}
            </b-dropdown-item-button>
            <b-dropdown-text v-if="availableItems(student_search, task_info.student_models, options.models).length === 0">
              无匹配结果
            </b-dropdown-text>
          </b-dropdown>
        </template>
      </b-form-tags>
    </b-form-group>

    <b-button
        block
        @click="createReorgTasks(task_info)"
        variant="primary"
        :style="style.submitBtn"
      >开始重组</b-button>
    </b-form>

    <b-card title="高级选项" sub-title="选填" bg-variant="light" v-if="currentAlgorithm!=null" fluid>
      <b-form-group v-for="field in currentAlgorithm.fields" :key="field.field_name"
          label-cols-sm="2"
          :label=field.field_name
          :description=field.field_note
          label-align-sm="right"
        >
          <b-form-input v-model="field.field_value"></b-form-input>
        </b-form-group>
    </b-card>

  
  </div>
</template>


<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { closeDialog } from "../store/utils";

export default {
  name: "CreateTask",
  data: function() {
    return {
      task_ds: null,
      task_info: {
        tasks: [],
        //size: 100,
        algorithms: null,
        datasets: [],
        teacher_models: [],
        student_models: [],
      },
      dataset_search: '',
      teacher_search: '',
      student_search: '',

      style: {
        title: {
          fontSize: "20px"
        },
        pagination: {
          marginTop: "20px"
        },
        submitBtn: {
          marginTop: "20px",
          marginBottom: "20px"
        },
        checkbox: {
          marginLeft: "0px",
          marginRight: "10px",
          marginTop: "5px",
          marginBottom: "5px"
        },
        teacher_model_btn: {
          marginRight: "20px"
        },
      }
    };
  },
  computed: {
      // Datasets
      availableAlgorithms(){
        return this.options.algorithms.map(a => a.alg_name);
      },
      currentAlgorithm(){
        return this.options.algorithms.find( alg => (alg.id == this.task_info.algorithms) )
      },
      ...mapState("task", {
        reorg_tasks: state => state.reorg_tasks,
        options: state => state.options,
        errors: state => state.errors,
      }),
  },

  methods: {
    ...mapActions("task", [
      "createReorgTasks",
      "getReorgOptions"
    ]),
    closeDialog,
    getCriteria(search_list) {
        // Compute the search criteria
        return search_list.trim().toLowerCase()
    },

    onDatasetClick({ item, addTag }) {
      addTag(item.name)
      this.dataset_search = ""
    },
    onTeacherClick({ item, addTag }) {
      addTag(item.name)
      this.teacher_search = ""
    },
    onStudentClick({ item, addTag }) {
      addTag(item.name)
      this.student_search = ""
    },

    availableItems(search, selectedItems, allItems) {
        const criteria = this.getCriteria(search)
        const candidates = allItems.filter(candi => (selectedItems.indexOf(candi.name) === -1) )
        if (criteria) {
          return candidates.filter(candi => candi.name.toLowerCase().indexOf(criteria) > -1);
        }
        return candidates
      },
  },
    mounted() {
    this.$store.dispatch("task/getReorgOptions");
  }
};
</script>
